<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .xianxingjianbian {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .base {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        .base2 {
            width: 200px;
            height: 300px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="xianxingjianbian">
        <div class="base " style="background-image: linear-gradient(green, yellow, red);"></div>
        <p>linear-gradient里的颜色到少要有两个值，两个以上都可以,表示从绿色变成黄色再变成红色（默认从上到下相当于90度）</p>
        <div class="base " style="background-image: linear-gradient(to right,green, yellow, red);"></div>
        <p>也可以修改方向，to right表示从左到右，to bottom表示从上到下，</p>
        <hr>
        <div style="display: flex;">
            <div class="base " style="background-image: linear-gradient(to right top,green, yellow, red);"></div>
            <img src="./img/rightAndTop.png" alt="">
        </div>
        <p>也可以两个方向一起使用，to right top表示从左到右，同时从下到上</p>
        <hr>
        <div style="display: flex;">
            <div class="base " style="background-image: linear-gradient(45deg, green, yellow, red);"></div>
            <img src="./img/0deg.png" alt="">
            <img src="./img/45deg.png" alt="">
        </div>
        
        <p>还可以设置角度，45deg表示45度，表示从绿色变成黄色再变成红色，顺时针转动45度，对比0度可才可以看出是顺时针旋转的（默认从上到下相当于90度）</p>
        <hr>
       <div style="display: flex;">
        <div class="base " style="background-image: linear-gradient(green 0px, yellow 33%, red 300px);"></div>
        
        <div class="base " style="background-image: linear-gradient(green, yellow, red);"> 正常的，这个黄色在中间最黄</div>   
    </div>
        <p>还可以设置颜色的位置，0px表示从0开始是绿色，33%表示到33%也就是100px是最黄色，此时可以看出绿色和黄色在这33%里，各占了一半，300px表示从33%到300px这里，黄色占一半，红色占一半，300px红色最红，然后结束</p>
        <hr>
        <div style="display: flex;">
            <div class="base " style="background-image: linear-gradient(green, yellow, red);">正常的，</div>
            <div class="base " style="background-image: linear-gradient(green 0px, yellow 150px, red 300px);">有数值也是正常的</div>
            <div class="base " style="background-image: linear-gradient(green 50px, yellow 150px, red 300px);">从50px开始是绿色，那么0到50纯绿色</div>
            <div class="base " style="background-image: linear-gradient(green 0px, yellow 150px, red 350px);">红色350px后才开始变，所以红色在300px是还不是最红</div>
            <div class="base " style="background-image: linear-gradient(green 0px, yellow 150px, red 150px);">另一种写法和效果</div>
        </div>
        <p>这几种可以直接观察对比一下，可以更好的理解</p>
        <hr>
        <div style="display: flex;">
            <div class="base2" style="background-image: linear-gradient(green, yellow, red);">正常的，</div>
            <div class="base2" style="background-image: repeating-linear-gradient(green, yellow, red);">加了重复的效果，但是没有变化</div>
            <div class="base2" style="background-image: linear-gradient(green 100px, yellow, red);">正常不加repeating-，0到100是绿色，100到300是渐变，同时可以看出这三种颜色平均分布</div>
            <div class="base2" style="background-image: repeating-linear-gradient(green 100px, yellow, red);">本来0到100是绿色，100到300是渐变，但是这个加了repeating-，所以0到100是绿色，没渐变的，重复了渐变，然后这个渐变是首尾相接的</div>
            <div class="base2" style="background-image: repeating-linear-gradient(green , yellow, red 200px);">所谓首尾相接，这个渐变是：从绿到黄，再到红结束，如果重复，就是再来一遍：从绿到黄，再到红结束。所以是红和绿相接</div>
            <div class="base2" style="background-image: linear-gradient(green 100px, yellow, red 200px);"></div>
            <div class="base2" style="background-image: repeating-linear-gradient(green 100px, yellow, red 200px);"></div>
            <div class="base2" style="background-image: repeating-linear-gradient(green , yellow, red 200px);"></div>
            <div class="base2" style="background-image: repeating-linear-gradient(45deg,green , yellow, red 200px);"></div>
            <div class="base2" style="background-image: linear-gradient(45deg,green , yellow, red 200px);"></div>
        </div>
        <p>还有一个重复的效果，repeating-重复效果只发生在没有设置渐变的地方</p>
        <div style="display: flex;">
            <div class="base2" style="background-image: linear-gradient(45deg,green , yellow, red 200px);">只是旋转45度，没有重复，红色有100px的纯红色</div>
            <div class="base2" style="background-image: linear-gradient(0deg, yellow, red 200px);">没有重复，设置为0度（不再默认从上到下），无旋转，红色有100px的纯红色</div>
            <div class="base2" style="background-image: repeating-linear-gradient(0deg,green , yellow, red 200px);">重复， 设置为0度，无旋转，原来红色有100px的纯红色，现在因为重复也是渐变了</div>
            <div class="base2" style="background-image: repeating-linear-gradient(45deg,green , yellow, red 200px);">重复， 设置为45度，原来红色有100px的纯红色，现在因为重复也是渐变了</div>
            <div class="base2" style="background-image: repeating-linear-gradient(45deg,green 100px , yellow, red 200px);">重复， 设置为45度，原来红色和绿色有100px的无渐变的纯色，现在因为重复也是渐变了</div>
            
            <div class="base2" style="background-image: repeating-linear-gradient(45deg,green 100px , yellow, red 120px);">原来是100到120，这20px是渐变，现在因为重复，都填充是渐变了</div>
            <div class="base2" style="background-image: repeating-linear-gradient(45deg,green 100px , yellow , red 110px);">原来是100到110，这10px是渐变，现在因为重复，都填充是渐变了</div>
        </div>
    </div>
    
</body>
</html>